<template>
    <div>
      <Title :title="title"></Title>
      <div ref="chartContainer" style="height: 200px; margin-top: 22px;"></div>
    </div>
  </template>
  
  <script>
  import { Area } from '@antv/g2plot';
  import { get } from '../../utils/request';
  import { mapState } from 'vuex';
  import moment from 'moment';
  
  export default {
    data() {
      return {
        title: '多参数堆积趋势图',
        params: {
          page: 1,
          pageSize: 51
        },
        chartData: [],
        chartInstance: null,
        // 定义要显示的参数类型及其中文名称
        parameters: [
          { key: 'temperature', name: '温度', unit: '°C' },
          { key: 'humidity', name: '湿度', unit: '%' },
          { key: 'pressure', name: '气压', unit: 'hPa' }
        ],
        // 用于保存当前时间
        currentTime: null,
        // 用于保存定时器ID
        timer: null
      }
    },
    computed: {
      ...mapState(['ed'])
    },
    watch: {
      ed: {
        handler(newVal) {
          this.params.device_id = newVal.device_id;
          this.params.engineer_id = newVal.engineer_id;
          this.fetchChartData();
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      // 初始化堆积面积图
      initChart() {
        if (this.chartInstance) {
          this.chartInstance.destroy();
        }

        // 更新当前时间
        this.updateCurrentTime();

        this.chartInstance = new Area(this.$refs.chartContainer, {
          data: this.chartData,
          xField: 'time',
          yField: 'value',
          seriesField: 'type',
          isStack: true,
          smooth: true,
          color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
          
          // 面积图样式
          areaStyle: {
            fillOpacity: 0.7,
          },
          
          // 折线样式
          line: {
            size: 2,
          },
          
          // 点样式
          point: {
            size: 3,
            shape: 'circle',
            style: {
              fill: 'white',
              stroke: '#5B8FF9',
              lineWidth: 2,
            },
          },
          
          // 坐标轴配置
          xAxis: {
            title: {
              text: '时间',
              style: {
                fill: '#aaa',
              },
            },
            label: {
              style: {
                fill: '#aaa',
              },
              // 直接使用传入的时间字符串，这些时间已经在生成数据时处理为当前系统时间
              formatter: (text) => text
            },
            grid: {
              line: {
                style: {
                  stroke: '#2a2a2a',
                  lineDash: [4, 4]
                }
              }
            }
          },
          
          yAxis: {
            title: {
              text: '参数值',
              style: {
                fill: '#aaa',
              },
            },
            label: {
              style: {
                fill: '#aaa',
              },
              formatter: (v) => `${v}`
            },
            grid: {
              line: {
                style: {
                  stroke: '#2a2a2a',
                  lineDash: [4, 4]
                }
              }
            }
          },
          
          // 提示框配置
          tooltip: {
            shared: true,
            showCrosshairs: true,
            crosshairs: {
              line: {
                style: {
                  stroke: '#5B8FF9',
                  lineWidth: 1,
                }
              }
            },
            domStyles: {
              'g2-tooltip': {
                background: 'rgba(0, 0, 0, 0.7)',
                color: '#fff',
                border: '1px solid #333'
              }
            },
            formatter: (datum) => {
              const param = this.parameters.find(p => p.name === datum.type);
              return {
                name: datum.type,
                value: `${datum.value} ${param ? param.unit : ''}`
              };
            }
          },
          
          // 动画效果
          animation: {
            appear: {
              animation: 'clipingWithData',
              duration: 2000,
            }
          },
          
          // 缩略轴
          slider: {
            start: 0,
            end: 1,
            height: 24,
            trendCfg: {
              isArea: true
            },
            handlerStyle: {
              fill: '#5B8FF9',
              opacity: 0.3
            }
          },
          
          // 图例配置
          legend: {
            position: 'top-right',
            itemName: {
              style: {
                fill: '#ccc'
              }
            }
          }
        });
        
        this.chartInstance.render();
      },
      
      // 更新当前时间
      updateCurrentTime() {
        this.currentTime = moment();
      },
      
      // 开始定时更新时间
      startTimeUpdater() {
        // 清除已有定时器
        if (this.timer) {
          clearInterval(this.timer);
        }
        
        // 每隔1分钟更新一次时间并刷新图表
        this.timer = setInterval(() => {
          this.updateCurrentTime();
          this.refreshChartWithCurrentTime();
        }, 60000);
      },
      
      // 使用当前时间更新图表时间
      refreshChartWithCurrentTime() {
        if (!this.chartData || this.chartData.length === 0) return;
        
        // 创建新的时间点
        const updatedData = [];
        const uniqueTimes = [...new Set(this.chartData.map(item => item.time))];
        
        uniqueTimes.sort();
        
        // 根据当前时间更新时间点
        uniqueTimes.forEach((_, index) => {
          const timeString = this.currentTime.clone()
            .subtract(uniqueTimes.length - index - 1, 'minutes')
            .format('HH:mm');
          
          // 找出对应此时间的所有数据点
          const itemsAtTime = this.chartData.filter(item => 
            item.time === uniqueTimes[index]
          );
          
          // 更新这些数据点的时间
          itemsAtTime.forEach(item => {
            updatedData.push({
              ...item,
              time: timeString
            });
          });
        });
        
        // 更新图表数据
        this.chartData = updatedData;
        
        if (this.chartInstance) {
          this.chartInstance.changeData(this.chartData);
        }
      },
      
      // 获取数据并处理为堆积图格式
      async fetchChartData() {
        try {
          const res = await get('/dashboard/pageQueryTodayData', this.params);
          console.log('API响应数据:', res);
          
          if (!res.data?.list?.length) {
            console.warn('未获取到数据');
            return;
          }

          // 更新当前时间
          this.updateCurrentTime();
          
          // 转换数据格式为堆积图需要的结构
          const processedData = [];
          const timeMap = {};
          
          // 1. 先按时间分组，使用当前系统时间
          res.data.list.forEach((item, index) => {
            // 使用当前时间生成时间序列
            const timeString = this.currentTime.clone()
              .subtract(res.data.list.length - index - 1, 'minutes')
              .format('HH:mm');
            
            if (!timeMap[timeString]) {
              timeMap[timeString] = { time: timeString };
            }
            
            // 将数据关联到对应的时间点
            this.parameters.forEach(param => {
              if (item[param.key] !== undefined) {
                timeMap[timeString][param.key] = item[param.key];
              }
            });
          });
          
          // 2. 转换为堆积图数据结构
          Object.keys(timeMap).sort().forEach(timeKey => {
            const timeItem = timeMap[timeKey];
            
            this.parameters.forEach(param => {
              if (timeItem[param.key] !== undefined) {
                processedData.push({
                  time: timeItem.time,
                  type: param.name,
                  value: parseFloat(timeItem[param.key])
                });
              }
            });
          });
          
          // 3. 数据采样（每3条取1条）
          this.chartData = processedData.filter((_, index) => index % 3 === 0);
          
          // 4. 更新图表
          if (this.chartInstance) {
            this.chartInstance.changeData(this.chartData);
          } else {
            this.initChart();
          }
        } catch (error) {
          console.error('获取数据失败:', error);
          this.useFallbackData();
        }
      },
      
      // 获取参数友好名称
      getParameterName(param) {
        const names = {
          temperature: '温度(℃)',
          humidity: '湿度(%)',
          pressure: '压力(hPa)'
        };
        return names[param] || param;
      },
      
      // 备用数据（当API不可用时）
      useFallbackData() {
        this.updateCurrentTime();
        
        const fallbackData = [];
        const params = this.parameters;
        
        // 生成24个时间点
        for (let i = 0; i < 24; i++) {
          const time = this.currentTime.clone()
            .subtract(23 - i, 'minutes')
            .format('HH:mm');
          
          params.forEach(param => {
            // 为每个参数生成模拟值
            let value;
            switch(param.key) {
              case 'temperature':
                value = 20 + Math.sin(i / 3) * 5 + Math.random() * 2;
                break;
              case 'humidity':
                value = 50 + Math.cos(i / 2) * 10 + Math.random() * 5;
                break;
              case 'pressure':
                value = 1000 + Math.sin(i / 4) * 5 + Math.random() * 3;
                break;
              default:
                value = Math.random() * 100;
            }
            
            fallbackData.push({
              time,
              type: param.name,
              value: parseFloat(value.toFixed(2))
            });
          });
        }
        
        this.chartData = fallbackData;
        this.initChart();
      }
    },
    
    mounted() {
      // 获取初始数据
      this.fetchChartData();
      
      // 启动定时器更新时间
      this.startTimeUpdater();
    },
    
    beforeDestroy() {
      // 清理定时器
      if (this.timer) {
        clearInterval(this.timer);
      }
      
      // 销毁图表实例
      if (this.chartInstance) {
        this.chartInstance.destroy();
        this.chartInstance = null;
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  /* 可以添加自定义样式 */
  </style>